<!DOCTYPE html>
<title>Geolocation API Polyfill Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="polyfill.css">

<h1>Geolocation API Polyfill Demo</h1>
<p>This demo page overrides your browser&#39;s built-in geolocation support, if possible.</p>

<div style="width: 800px; height: 403px; position: relative;">
<img id="map" src="geo.jpg" style="position: absolute; left: 0; top: 0; width: 800px; height: 403px;">
<div id="locator" style="display: none; position: absolute; left: 100px; top: 100px; height: 10px; width: 10px; margin-left: -5px; margin-top: -5px; background-color: red; z-index: 1; border-radius: 5px;"></div>
</div>
<p style="font-size: 8pt"><a href="http://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg">Equirectangular projection by Strebe.</a> Licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.</p>

<p id="message">Checking position...</p>

<script>window.navigator.geolocation = (void 0);</script>
<script src="../geo.js"></script>

<script>
function message(s) {
  var div = document.getElementById('message');
  while (div.firstChild)
    div.removeChild(div.firstChild);
  div.appendChild(document.createTextNode(s));
}

function locate(lat, lng) {
  var map = document.getElementById('map');
  var x = map.offsetWidth * ((lng + 180) % 360) / 360;
  var y = map.offsetHeight * (90 - lat) / 180;
  var locator = document.getElementById('locator');
  locator.style.display = '';
  locator.style.left = String(x) + 'px';
  locator.style.top = String(y) + 'px';
}

window.onload = function () {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      locate(lat, lng);
      message('Latitude: ' + lat + ' Longitude: ' + lng);
    },
    function (error) {
      message('Error: ' + error.message);
    }
  );
};
</script>
